<template>
  <div v-if="show" @click="choice($event , fname+'-close')" class="hxui-modal-mask" style="z-index:10"></div>
  <!--hxui-modal-alert   hxui-modal-confirm   hxui-modal-prompt  hxui-modal-msg -->
  <div v-if="show" transition="modalanimate" class="hxui-modal hxui-modal-show hxui-modal-{{type}}" style="z-index:11">
    <div v-if="type != 'msg'" class="hxui-modal-title">
      {{title}}
      <a class="hxui-modal-close hxui-title-close">
        <i class="iconfont"></i>
      </a>
    </div>
    <div class="hxui-modal-content">
      <slot></slot>
      <input v-if="type == 'prompt' && prompt_type == 'text'" type="text" class="input-box hxui-prompt-input"/>
      <input v-if="type == 'prompt' && prompt_type == 'password'" type="password" class="hxui-prompt-input"/>
      <textarea v-if="type == 'prompt' && prompt_type == 'textarea'" class="input-box hxui-prompt-textarea"></textarea>
    </div>
    <div v-if="type != 'msg'" class="hxui-modal-btn">
      <a class="hxui-btn hxui-btn-choice" @click="choice($event , fname+'-choice')">{{choice_text}}</a>
      <a v-if="type == 'confirm' || type == 'prompt'" @click="choice($event , fname+'-close')" class="hxui-btn hxui-modal-close">{{close_text}}</a>
    </div>
  </div>
</template>
<script>
  export default{
    props:{
      //弹窗类型
      type:{
        type: String,
        required:false,
        default:"alert"
      },
      //标题
      title:{
        type:String,
        required:false,
        default:"提示"
      },
      //显示
      show:{
        type:Boolean,
        required:true,
        default:false
      },
      //choice-btn
      choice_text:{
        type:"String",
        required:false,
        default:"确定"
      },
      //close-btn
      close_text:{
        type:"String",
        required:false,
        default:"取消"
      },
      prompt_type:{
        type:String,
        required:false,
        default:"text"
      },
      fname:{
        type:String,
        required:false
      }
    },
    methods:{
      choice(event , eventStr){
        console.log(eventStr);
        this.$dispatch(eventStr);
      }
    }
  }
</script>
<style>
  html,body,div{
    margin:0;
    padding:0;
  }
  html,body{
    font-size:18px;
    font-family:"微软雅黑";
    line-height:21px;
  }
  a{
    text-decoration:none;
  }
  .iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
  }
  /*input初始化*/
  input,
  textarea{
    outline: 0;
    font-size:14px;
    resize:none;
  }
  /*公公样式*/
  .hxui-modal-mask,
  .hxui-modal{
    position:fixed;
  }
  /*圆角*/
  .hxui-modal{
    border-radius:4px;
    left:50%;
    top:50%;
    -moz-transition:all 0.3s;
    -ms-transition:all 0.3s;
    -webkit-transition:all 0.3s;
    transition:all 0.3s;
  }
  /*弹窗ico*/
  .hxui-modal-content i{
    color:#6795fd;
  }
  /*公共样式结束*/
  /*遮罩层*/
  .hxui-modal-mask{
    width:100%;
    height:100%;
    opacity:0.3;
    filter: alpha(opacity=30);
    top:0;
    left:0;
    background:#000;
  }
  /*modal*/
  .hxui-modal{
    overflow:hidden;
    border-radius:2px;
    max-width:360px;
    box-shadow:2px 4px 10px rgba(0,0,0,.3);
  }
  .hxui-modal-alert,
  .hxui-modal-prompt,
  .hxui-modal-confirm{
    color:#333;
    min-width:260px;
    background:#fff;

  }
  /*msg*/
  .hxui-modal-msg{
    min-width:100px;
    background:#fff;
    color:#333;
  }
  /*modal-title*/
  .hxui-modal-title{
    padding:0 40px 0 20px;
    height:42px;
    line-height:42px;
    font-size:16px;
    color:#333;
    background:#F8F8F8;
    border-bottom:1px solid #eee;
    text-overflow: ellipsis;
    white-space:nowrap;
    overflow:hidden;
    cursor:move;
  }
  /*modal-content*/
  .hxui-modal-msg .hxui-modal-content{
    text-align:center;
  }
  .hxui-modal-content{
    position:relative;
    font-size:16px;
    line-height:24px;
    padding:15px 20px;
  }
  /*内容图标*/
  .hxui-modal-content i{
    width:30px;
    height:30px;
    display:block;
    position:absolute;
    font-size:30px;
    left:15px;
    top:11px;
    line-height:30px;
    display:inline-block;
  }
  /*有图标的时候*/
  .hxui-modal-IcoShow{
    padding:15px 15px 15px 55px;
  }
  /*上面关闭按钮*/
  .hxui-title-close{
    display:inline-block;
    width:16px;
    height:16px;
    position:absolute;
    right:20px;
    top:15px;
    line-height:16px;
    font-size:0;
    cursor:pointer;
    -webkit-transition:transform 0.3s;
    -ms-transition:transform 0.3s;
    transition:transform 0.3s;
    /*旋转*/
    -webkit-transform:rotate(0deg);
    -ms-transform:rotate(0deg);
    -moz-transform:rotate(0deg);
    transform:rotate(0deg);
  }
  .hxui-title-close i{
    font-size:18px;
  }
  /*title关闭按钮移入*/
  .hxui-title-close:hover{
    color:#6795fd;
    -webkit-transform:rotate(180deg);
    -ms-transform:rotate(180deg);
    -moz-transform:rotate(180deg);
    transform:rotate(180deg);
  }
  /*按钮框*/
  .hxui-modal-btn{
    padding:0 20px 15px;
    text-align:right;
  }
  /*按钮*/
  .hxui-modal-btn .hxui-btn{
    display:inline-block;
    min-width:28px;
    text-align:center;
    padding:0 15px;
    height:28px;
    line-height:28px;
    border:1px solid #dedede;
    font-size:14px;
    background:#F8F8F8;
    cursor:pointer;
    margin-left:10px;
    font-weight: 400;
    border-radius:2px;
  }
  .hxui-modal-btn .hxui-modal-close:hover{
    background:#ededed;
  }
  /*选择按钮*/
  .hxui-modal-btn .hxui-btn-choice{
    background:#6795fd;
    color:#fff;
    border:1px solid #4898d5;
  }
  .hxui-modal-btn .hxui-btn-choice:hover{
    background:#5a8bfb;
  }
  /*prompt类型*/
  /*hxui-prompt-input*/
  .hxui-modal-prompt .hxui-prompt-input{
    display:block;
    width:220px;
    height:30px;
    line-height:30px;
    padding:0 5px;
    margin:0 auto;
  }
  /*hxui-prompt-textarea*/
  .hxui-modal-prompt .hxui-prompt-textarea{
    width:300px;
    height:100px;
    padding:5px;
    line-height:1.8;
    font-size:14px;
    color:#333;
    font-family:"微软雅黑";
  }
  /*公共*/
  .hxui-prompt-input,
  .hxui-prompt-textarea{
    border-radius:2px;
    border:1px solid #dedede;
  }
  /*动画*/
  .modalanimate-enter, .modalanimate-leave {
    opacity: 0;
  }
  .modalanimate-enter,
  .modalanimate-leave{
    -webkit-transform:scale(1.1);
    -moz-transform:scale(1.1);
    -ms-transform:scale(1.1);
    transform:scale(1.1);
  }
</style>
